
import React, {Component} from 'react';
import { Form, Row, Col, Input, Cascader, Upload, Button, Icon, Select } from 'antd';
const { Option } = Select;
class OrgEdit extends Component {
    constructor(props) {
        super(props);
        this.state = {
            pics: [],
        };
    }
    handleFileUploadChange({fileList}) {
        this.setState({
            pics: fileList,
        })
    }
    handleSubmit(e) {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            console.log('Received values of form: ', values);
        });
    }
    render() {
        const { getFieldDecorator } = this.props.form;
        return (
            <Form className="org-editor-form" onSubmit={this.handleSubmit.bind(this)}>
                <Row>
                    <Col span={10} key='1'>
                        <Form.Item label={'机构编号'}>
                            {getFieldDecorator(`order`, {
                                rules: [
                                    {
                                    required: true,
                                    message: '请输入编号',
                                    },
                                ],
                            })(<Input sytle={{width: '100px'}} placeholder="请输入编号" />)}
                        </Form.Item>
                    </Col>
                    <Col span={10} offset={4} key='2'>
                        <Form.Item label={'机构名称'}>
                            {getFieldDecorator(`name`, {
                                rules: [
                                    {
                                    required: true,
                                    message: '请输入名称',
                                    },
                                ],
                            })(<Input placeholder="请输入名称" />)}
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={10}>
                        <Form.Item label="所属类型">
                            {getFieldDecorator('select', {
                                rules: [{ required: true, message: 'Please select your country!' }],
                            })(
                                <Select placeholder="请选择">
                                    {
                                        this.props.types && this.props.types.map((item) => {
                                            return (
                                                <Option key={item} value={item.value}>{item.label}</Option>
                                            );
                                        })
                                    }
                                </Select>
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={10} offset={4}>
                        <Form.Item label="机构类型">
                            {getFieldDecorator('select', {
                                rules: [{ required: true, message: 'Please select your country!' }],
                            })(
                                <Select placeholder="请选择">
                                    {
                                        this.props.types && this.props.types.map((item) => {
                                            return (
                                                <Option key={item} value={item.value}>{item.label}</Option>
                                            );
                                        })
                                    }
                                </Select>
                            )}
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col span={10} key='1'>
                        <Form.Item label={'负责人'}>
                            {getFieldDecorator(`order`, {
                                rules: [
                                    {
                                    required: true,
                                    message: '请输入编号',
                                    },
                                ],
                            })(<Input sytle={{width: '100px'}} placeholder="请输入编号" />)}
                        </Form.Item>
                    </Col>
                    <Col span={10} offset={4} key='2'>
                        <Form.Item label={'负责人电话'}>
                            {getFieldDecorator(`name`, {
                                rules: [
                                    {
                                    required: true,
                                    message: '请输入名称',
                                    },
                                ],
                            })(<Input placeholder="请输入名称" />)}
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <Form.Item label="城市/县">
                        {getFieldDecorator('username')(
                            <Cascader
                                options={[]}
                            />
                        )}
                        </Form.Item>
                    </Col>
                </Row>
                <Row>
                    <Col>
                        <Upload 
                         action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                         listType="picture-card"
                         fileList={this.state.pics}
                         onChange={this.handleFileUploadChange.bind(this)}
                         >
                            {
                                this.state.pics.length >= 9 ? null :
                                <div>
                                    <Icon type="plus" />
                                    <div className="ant-upload-text">Upload</div>
                                </div>
                            }
                         </Upload>
                    </Col>
                </Row>
                <Row>
                    <Col>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            Register
                        </Button>
                    </Form.Item>
                    </Col>
                </Row>
            </Form>
        );
    }
};
export default Form.create({ name: 'add_or_edit_modal' })(OrgEdit);